<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-card style="width: 90%;margin-top: 20px;background-color: #addcf3;border-radius: 10px;">
        <div style="height: 50px;font-size: 25px;color: white">预定酒店</div>
        <div style="display: flex;justify-content: center">
          <div
              style="display: flex; align-items:center;justify-content: center;border-radius: 10px;background-color: white;height: 80px;width: 100%">
            <el-row :gutter="10">
              <el-col :span="5">
                <div style="margin: 5px">目的地</div>
                <el-autocomplete
                    class="inline-input"
                    v-model="cityKeyword"
                    :fetch-suggestions="querySearchCity"
                    placeholder="城市"
                    @select="handleSelectCity"
                    style="margin-bottom: 5px"
                ></el-autocomplete>
              </el-col>
              <el-col :span="9">
                <div style="margin: 5px">预约时间</div>
                <div class="block">
                  <el-date-picker
                      v-model="dateValue"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="margin: 5px">关键词（选填）</div>
                <el-autocomplete
                    class="inline-input"
                    v-model="keyword"
                    :fetch-suggestions="querySearch"
                    placeholder="机场/火车站/酒店名称..."
                    @select="handleSelect"
                ></el-autocomplete>
              </el-col>
              <el-col :span="5">
                <div style="margin: 5px">酒店级别</div>
                <el-select v-model="level" multiple placeholder="酒店级别">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-button type="primary" icon="el-icon-search"
                       style="font-size: 18px; width: 122px;height: 61px;border-radius: 10px;margin-left: 20px"
                       @click="search()">
              搜索
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <div style="width: 90%;margin-top: 20px;background-color: #addcf3;border-radius: 10px;">
        <div>
          <div style="width: 100%;display: flex;justify-content: center">
            <div>
              <el-carousel indicator-position="outside" @change="handleCarouselChange"
                           style="width: 750px;margin-top: 20px">
                <el-carousel-item v-for="(hotel_id, index) in idList" :key="index" align="center">
                  <router-link :to="`/hotelDetail?id=${hotel_id}`">
                    <img :src="`http://localhost:8000/hotel_image_download/${hotel_id}/`" alt=""
                         style="width: 500px;height: 300px">
                  </router-link>
                </el-carousel-item>
              </el-carousel>
              <div style="font-size: 24px;color: black" align="center">{{ PicData[currentIndex].hotelname }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'userHome',
  data() {
    return {
      idList: [],
      picture: "",
      currentIndex: 0,
      options: [{
        value: '1',
        label: '一星'
      }, {
        value: '2',
        label: '二星'
      }, {
        value: '3',
        label: '三星'
      }, {
        value: '4',
        label: '四星'
      }, {
        value: '5',
        label: '五星'
      }],
      restaurantsCity: [],
      restaurants: [],
      cityKeyword: "",
      cityKey: "",
      dateValue: "",
      keyword: "",
      level: "",
      tableData: [],
      PicData: [],
      table: [],
      audited: true,
    }
  },
  //计算时间
  computed: {
    formattedStartDate() {
      if (this.dateValue) {
        const startDate = this.dateValue[0];
        const year = startDate.getFullYear();
        const month = String(startDate.getMonth() + 1).padStart(2, '0');
        const day = String(startDate.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } else {
        return '';
      }
    },
    formattedEndDate() {
      if (this.dateValue) {
        const endDate = this.dateValue[1];
        const year = endDate.getFullYear();
        const month = String(endDate.getMonth() + 1).padStart(2, '0');
        const day = String(endDate.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } else {
        return '';
      }
    },
    duration() {
      if (this.dateValue) {
        const diff = Math.ceil((this.dateValue[1] - this.dateValue[0]) / (1000 * 60 * 60 * 24));
        return `${diff}`;
      } else {
        return '';
      }
    },

  },
  methods: {
    handleCarouselChange(index) {
      this.currentIndex = index;
    },
    setCity(city) {
      this.cityKey = city; // 设置当前选中的城市关键字为指定的城市
      this.$message.info("暂无酒店")
      this.loadH()
    },
    load() {
      this.$request.get('/hotel_rank_list/').then(res => {
        if (res.code === '200') {
          this.tableData = res.data
          this.loadH()
        }
      })
    },
    loadH() {  //分页查询
      this.$request.get('/hotel_recommend_list/').then(res => {
        if (res.code === '200') {
          this.PicData = res.data
          for (let i = 0; i < this.PicData.length; i++) {
            this.idList.push(this.PicData[i].hotel_id);
          }
          console.log("this.PicData", this.PicData)
        } else if (res.code === '501') {
          this.$message.info("暂无酒店")
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleAvatarSuccess(response, file, fileList) {
      // 把shops的图片属性换成上传的图片的链接
      this.picture = response.data
    },
    search() {
      this.$router.push({
        path: '/hotelList',
        query: {
          cityKeyword: this.cityKeyword,
          formattedStartDate: this.formattedStartDate,
          formattedEndDate: this.formattedEndDate,
          keyword: this.keyword,
          level: this.level,
        }
      })
    },
    //下拉菜单设置
    querySearchCity(queryString, cb) {
      var restaurantsCity = this.restaurantsCity;
      var results = queryString ? restaurantsCity.filter(this.createFilterCity(queryString)) : restaurantsCity;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilterCity(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadCityAll() {
      return [
        {"value": "上海"},
        {"value": "南京"},
        {"value": "苏州"},
        {"value": "杭州"},
        {"value": "淮安"},
      ];
    },
    loadAll() {
      return [
        {"value": "机场"},
        {"value": "火车站"},
        {"value": "景区"},
        {"value": "医院"},
      ];
    },
    handleSelectCity(item) {
      console.log(item);
    },
    handleSelect(item) {
      console.log(item);
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
    this.restaurantsCity = this.loadCityAll();
  },
  created() {
    this.load()
  }
}
</script>
<style scoped>
.fromStyle {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
</style>
